<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue.js 2.0</title>
        <link rel="stylesheet" href="./css/bootstrap.min.css">
        <style>
            .completed {
                color: #5cb85c;
                text-decoration: line-through;
            }
        </style>
    </head>
    <body>
        <nav class="navbar navbar-default navbar-static-top">Vue.js 2.0</nav>
        <div class="container" id="app">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="panel panel-default">
                        <div class="panel-heading">Welcome vue.js 2.0 Tutorial</div>
                        <div class="panel-body">
                            <h1>My todos {{todosCount}}</h1>
                            <!-- <input type="text" class="form-control" v-model="message"> -->
                            <todo-items v-bind:todos="todos"></todo-items>
                            <todo-form v-bind:todos="todos"></todo-form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <script type="text/x-template" id="todo-items-template">
        <ul class="list-group">
                <li class="list-group-item" 
                    v-bind:class="{'completed': todo.completed}"
                    v-for="(todo,index) in todos">
                    {{ todo.title }}
                    <button class="btn btn-xs pull-right"
                            v-bind:class="[todo.completed ? 'btn-danger' : 'btn-success']"
                            v-on:click="toggleComletion(todo)">{{ todo.completed ? 'undo' : 'completed' }}</button>
                    <button class="btn btn-warning btn-xs pull-right" v-on:click="deleteTodo(index)">Delete</button>
                </li>
            </ul>
    </script>
    <script type="text/x-template" id="todo-add-form-template">
        <form v-on:submit.prevent="addTodo(newTodo)">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Add a new todo" v-model="newTodo.title">
                </div>
                <div class="form-group">
                    <button class="btn btn-success" type="submit">Add Todo</button>
                </div>
            </form>
    </script>
    <script src="./js/vue.js"></script>
    <script>
        Vue.component('todo-items', {
            template: "#todo-items-template",
            props: ["todos"],
            methods: {
                deleteTodo(index){
                    this.todos.splice(index, 1)
                },
                toggleComletion(todo) {
                    todo.completed = !todo.completed
                }
            }
        })
        Vue.component('todo-form', {
            template: "#todo-add-form-template",
            props: ['todos'],
            data() {
                return {
                    newTodo:{id:null, title:"", completed:false}
                }
            },
            methods: {
                addTodo(newTodo){
                    this.todos.push(newTodo)
                    this.newTodo = {id:null, title:""}
                }
            }
        })
        new Vue({
            el: "#app",
            data: {
                todos: [
                    {id:1,title:"Learn Vue.js", completed:false}
                ]
            },
            computed: {
                todosCount() {
                    return this.todos.length;
                }
            }
        })
    </script>
    </body>
</html>